<template>
  <view class="withdrawal_">
    <view class="withdrawal_money">
      <image
        src="https://www.ylnumber.cn/file/test/productImage/20230707/2f8bc7f4c2ac4faba2e1af50683d854b.png"
      />
      <view class="info_money">
        <text>可提现金额(元)</text>
        <view>
          ￥
          <text>{{ income }}</text>
        </view>
      </view>
    </view>
    <view class="info_wrapper">
      <view class="title_">
        <image src="/static/withdrawal/2.png"></image>
        <text>提现金额</text>
      </view>
      <view class="form_wrapper">
        <u-form :model="formData" ref="uForm">
          <view class="item_wrapper">
            <view class="left_">
              <!--                <text>￥</text>-->
              <u-form-item
                label="￥"
                prop="cashMoney"
                label-width="56"
                :label-style="{
                  fontSize: '48rpx',
                  fontWeight: 'bold',
                  color: '#353535',
                }"
              >
                <u-input
                  v-model="formData.cashMoney"
                  type="number"
                  placeholder="满10元以上可提现"
                />
              </u-form-item>
            </view>
            <view class="right_" @tap="fullWithdrawalFn">全部提现</view>
          </view>
        </u-form>
      </view>
      <view class="content_wrapper">
        <!-- <view class="commission_">
          <image src="/static/withdrawal/1.png"></image>
          <text>额外扣除提现金额{{ commission_percentage }}%个人所得税</text>
        </view> -->
        <view class="way_wrapper">
          <view class="title_">
            <image src="/static/withdrawal/2.png"></image>
            <text>提现至</text>
          </view>
          <view class="way_">
			  <!-- 微信提现 -->
            <!-- <view @click="palybank(1)">
              <view class="money_" >
                <image src="/static/withdrawal/4.png"></image>
                <text>微信零钱</text>
              </view>
              <view class="moneysele_" :class="formData.type===1?'moneyselebd_':''">
              	<image v-if="formData.type===1"  src="/static/withdrawal/5.png"></image>
              </view>
            </view> -->
			<!-- //银行卡 -->
			<view @tap="palybank(2)">
			  <view class="money_" >
			    <image src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230720/495e6fd3f4c4449fbdecbf96f9507da8.png"></image>
			    <text>银行卡</text>
			  </view>
			  <view class="moneybanktext_">
				  <text>{{selectbankobj.bankName?selectbankobj.bankName:''}}{{selectbankobj.bankCardNo?'('+(selectbankobj.bankCardNo.slice((selectbankobj.bankCardNo.length)-4,selectbankobj.bankCardNo.length))+')':""}}</text>
			  	<view class="moneysele_" :class="formData.type===2?'moneyselebd_':''">
			  		<image  v-if="formData.type===2" src="/static/withdrawal/5.png"></image>
			  	</view>
			  </view>
			  
			  
			</view>
          </view>
          <view class="but_wrapper" @tap="submit"> 立即提现 </view>
        </view>
      </view>
    </view>
    <view class="footer_wrapper">
      <view class="title_">
        <image src="/static/withdrawal/2.png"></image>
        <text>提现规则</text>
      </view>
      <view class="info_">
        <p>
          1、个人所得税:每笔提现，“易联小铺”将为您代缴个人所得税，税率为6%，你无需提供发票。
        </p>
        <p>2、购物积分:每笔提现“易联小铺”将为您增加9%的购物积分。</p>
        <p>
          3、如在提现过程中有任何疑问，请致电“易联小铺’客服电话4008261913咨询
        </p>
      </view>
    </view>
    <u-modal
      v-model="show"
      :title-style="{ color: 'red' }"
      @cancel="cancel"
      @confirm="confirm"
      ref="uModal"
      :show-title="false"
      :async-close="true"
      :show-cancel-button="true"
      :confirm-color="'#FA5151'"
      :confirm-text="'确定'"
      :confirm-style="{
        borderLeft: '1px solid rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }"
    >
      <view class="slot-content">
        <view class="content_wrapper">
          <view class="logo_">
            <image class="img_1" src="/static/withdrawal/6.png"></image>
            <image class="img_2" src="https://www.ylnumber.cn/file/test/productImage/20230713/a9ea0f965ce84938b955b439b4b722e4.png"></image>
          </view>
          <view class="main_wrapper">
            <view class="item_info">
              <view class="top_">
                <view class="item_">
                  <text>申请提现金额</text>
                  <view> ￥{{ formData.cashMoney }} </view>
                </view>
                <view class="item_">
                  <text>个人所得税扣除{{ commission_percentage }}%</text>
                  <view> ￥{{ formData.commission }} </view>
                </view>
                <view class="item_">
                  <text>购物积分{{ integral_percentage }}%</text>
                  <view> ￥{{ formData.integral }}</view>
                </view>
              </view>
              <view class="money_total">
                <view>
                  <view>实际提现金额</view>
                  <view>￥{{ formData.money }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
	
	<!-- <u-popup :show="showbank" @close="close" @open="open">
            <view>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </view>
		</u-popup> -->
		<u-popup v-model="showbank" 
		mode="bottom"
		 border-radius=20
		 closeable=true
		 >
		 <view class="backpopupk_">
			 
			 
			 
			 
			 
			 
			 
		 	  <view class="backtitle_">
		 	  	选择银行卡
		 	  </view>
			  <view class="content">
			  				<scroll-view scroll-y="true" style="height: 350rpx;">
			  					<view class="backpopup_">
			  						<view class="itempopup_" v-for="(item, index) in banklist" :key="index" @tap="selectbank(item,index)">
			  								<text>{{item.bankName}}{{item.bankCardNo?'('+(item.bankCardNo.slice((item.bankCardNo.length)-4,item.bankCardNo.length))+')':""}}</text>
			  								<view class="itempopup_yuan" :class="check[index]?'itempopup_yuan_br':''">
			  								<image src="/static/withdrawal/5.png" v-if="check[index]"></image>
			  							</view>
			  							
			  						</view>
			  						
									<view class="itempopup_" @tap="goaddbank">
										<view class="itempopupimg_">
											<image src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230720/25b5b2f9ab224bb59b0955f489466357.png" ></image>
												<text>添加银行卡</text>
										</view>
										 
														
														
									</view>
			  					</view>
			  				</scroll-view>
			  				
			  </view>
			  
			  
			  
			  
			  
		 	  			
		 	  				
		 	  				
		 	  				
		 	  			
		 </view>
		
					
		</u-popup>
  </view>
</template>

<script>
import { getCommissionProportion, saveCashApply } from "@/api/withdrawal";
import {userBanklist} from "@/api/bankcard";

export default {
  name: "index.vue",
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    this.getCommissionProportionApi();
  },
  onLoad(options) {
    console.log(options, "参数");
    this.income = +options.income;
  },
  data() {
    return {
      toggleInt: false,
      income: "",
      show: false,
	  showbank:false,
      //手续费百分比
      commission_percentage: 0,
      //积分百分比
      integral_percentage: 0,
      formData: {
        //提现金额
        cashMoney: "",
        //实际金额
        money: 0,
        //服务费
        commission: 0,
        //积分费
        integral: 0,
		//提现类型
		type:1,
		//银行卡id
		bankId:''
		
      },
	  banklistqure:{
		 size:100,
		 current:1,
	  },
	  banklist:[],
	  check:[],
	  selectbankobj:{},
      rules: {
        cashMoney: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              console.log(value, "value");
              if (value < 10) {
                return callback("提现最低金额为10");
              } else {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                // this.$u.test.mobile()就是返回true或者false的
                callback();
              }
            },
            message: "提现最低金额为10",
            // 触发器可以同时用blur和change
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
	  // async getuserBanklist(){
		  
	  // },
	  // 选择银行卡
	 selectbank(item,index){
		this.check=[]
		 this.banklist.forEach((Element,i)=>{
			 if(i===index){
				  this.banklist[i].check=true
				 this.check.push(true)
			 }else{
				  this.banklist[i].check=false
				   this.check.push(false)
			 }
		 })
		  // this.banklist=this.banklist
		  this.formData.type=2
		  this.formData.bankId=item.id
		  this.selectbankobj=item
		  this.showbank=false
	 },
	 goaddbank(){
		 this.showbank=false
		 uni.navigateTo({
		   url: `/pages/subpackage/bankcard/addbankcard`,
		 });
	 },
    //查询提现手续费
    async getCommissionProportionApi() {
      const res = await getCommissionProportion();
      console.log(res, "res");
      if (res.code === 0) {
        this.toggleInt = true;
        const { integralCharge, serviceCharge } = res.data;
        //服务费
        this.commission_percentage = serviceCharge;
        //积分
        this.integral_percentage = integralCharge;
      }
    },
	//bank 弹框
	async palybank(indexselect){
		
		
		if(indexselect===1){
			this.formData.type=indexselect
			
		} else if(indexselect===2){
			const res= await userBanklist(this.banklistqure)
				
			if(this.selectbankobj.id){
				this.formData.type=indexselect
			}
			if(res.code===0){
				this.banklist=res.data
				if(this.banklist.length<=0){
					this.showbank=false
					uni.navigateTo({
					  url: `/pages/subpackage/bankcard/addbankcard`,
					});
				}
				
			}
			if(this.banklist.length>0){
			this.check=[]
			this.banklist.forEach((Element,index)=>{
				
				if(this.selectbankobj.id&&Element.id===this.selectbankobj.id){
					this.banklist[index].check=true
					this.check.push(true)
				}else{
					this.banklist[index].check=false
					this.check.push(false)
				}
				
			  })
			  // this.selectbankobj=this.banklist[0]
				this.showbank=true
			}
		}
	
	},

    //全部提现
    fullWithdrawalFn() {
      if (this.income === 0) {
        uni.showToast({
          title: "无可提现余额",
          icon: "error",
          duration: 2000,
        });
        return;
      }
      this.formData.cashMoney = this.income;
    },

    async confirm() {
      
	  // if(this.formData.type===1){
		 //  this.formData.bankId=""
	  // }else if(this.formData.type===2){
		 //   this.formData.bankId=this.selectbankobj.id
	  // }
	  
		  
	
	  
      if (uni.getStorageSync("token")) {
        const res = await saveCashApply(this.formData);
        console.log(res, "res");
        if (res.code === 0) {
          uni.setStorageSync("userInfoServer", res.data);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
        this.show = false;
      }
    },
    cancel() {
      console.log("点击了取消");
      this.show = false;
    },
    //计算积分百分比和手续费
    toggle() {
      this.formData.commission =
        this.formData.cashMoney * (this.commission_percentage / 100);
      this.formData.integral =
        this.formData.cashMoney * (this.integral_percentage / 100);

      this.formData.money =
        this.formData.cashMoney -
        (this.formData.commission + this.formData.integral);

      this.formData.commission = this.formData.commission.toFixed(2);
      this.formData.integral = this.formData.integral.toFixed(2);
      this.formData.money = this.formData.money.toFixed(2);
    },

    submit() {
      console.log(this.formData, "data");
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (this.income >= this.formData.cashMoney) {
            this.toggle();
            console.log("验证通过");
            console.log(this.formData, "data");
            if (this.toggleInt) {
				
				//要去掉的
				if(this.formData.bankId===""){
						 uni.showToast({
						 	icon:"none",
							title:"请选择银行卡"
						 })
						  return
				}
              this.show = true;
            } else {
              this.$refs.uToast.show({
                title: "获取数据失败，请重新加载小程序再试!",
                type: "error",
              });
            }
          } else {
            uni.showToast({
              title: "提现余额不足",
              icon: "error",
              duration: 2000,
            });
          }
        } else {
          console.log("验证失败");
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
	
	.backpopupk_{
		padding-bottom: rpx(30);
		
		>.content {
			margin-top: rpx(30);
			.backpopup_{
					
					padding-left: rpx(16);
					padding-right: rpx(16);
					box-sizing: border-box;
					/* 隐藏滚动条 */
					   // scrollbar-width: none; /* firefox */
					   // -ms-overflow-style: none; /* IE 10+ */
					   
					   .itempopup_{
						  display: flex;
						  justify-content: space-between;
						  font-size: rpx(15);
						 padding: rpx(10) 0;
						  font-weight: 500;
						  color: #314349;
						  >.itempopupimg_{
							  display: flex;
							  align-items: center;
							  >image{
							  							 width: rpx(22);
							  							 height: rpx(22);
														 margin-right: rpx(10);
							  }
						  }
						  >image{
							 width: rpx(22);
							 height: rpx(22);
						  }
						  >.itempopup_yuan{
						  				 width: rpx(22);
						  				 height: rpx(22);
						  				 border: 1px solid #B2B2B2;
										 border-radius: 50%;
						  				 >image{
						  					 width: rpx(22);
						  					 height: rpx(22);
						  				 }
						  			  }
						  			  >.itempopup_yuan_br{
						  				  border: none;
						  			  }
					  }
				}
			// 	>.backpopup_::-webkit-scrollbar {
			//     display: none; /* Chrome Safari */
			// }
				
			}
			>.backtitle_{
				width: rpx(375);
				// height: rpx(345);
				background: #FFFFFF;
				opacity: 1;
				text-align: center;
				padding-top: rpx(20);
				font-size: rpx(15);
				font-weight: bold;
				color: #353535;
				>.checkBox_{
					display: flex;
				}
			}
		
		
	}
	
.withdrawal_ {
  min-height: 100vh;
  > .withdrawal_money {
    position: relative;
    > image {
      width: rpx(375);
      height: rpx(170);
      vertical-align: middle;
    }
    > .info_money {
      position: absolute;
      top: rpx(24);
      left: rpx(12);
      > text {
        font-size: rpx(12);
        font-weight: 400;
        color: #ffffff;
      }
      > view {
        margin-top: rpx(4);
        font-size: rpx(12);
        font-weight: bold;
        color: #ffffff;
        > text {
          font-size: rpx(22);
        }
      }
    }
  }
  > .info_wrapper {
    padding: rpx(16) rpx(12);
    background: #ffffff;
    border-radius: rpx(5);
    position: relative;
    margin: rpx(-72) rpx(12) rpx(8);
    > .title_ {
      > image {
        width: rpx(3);
        height: rpx(13);
        margin-right: rpx(5);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: bold;
        color: #353535;
      }
    }
    > .form_wrapper {
      border-bottom: rpx(1) solid #efefef;
      u-form::v-deep {
        .u-border-bottom:after {
          border: none;
        }
      }
      .item_wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        > .left_ {
          display: flex;
          align-items: center;
          > text {
            font-size: rpx(24);
            font-weight: bold;
            color: #353535;
            margin-right: rpx(4);
          }
        }
        > .right_ {
          font-size: rpx(13);
          font-weight: 400;
          color: #fa5151;
        }
      }
    }
    > .content_wrapper {
      > .commission_ {
        display: flex;
        align-items: center;
        margin-top: rpx(10);
        > image {
          vertical-align: middle;
          width: rpx(14);
          height: rpx(14);
          margin-right: rpx(4);
        }
        > text {
          font-size: rpx(12);
          font-weight: 400;
          color: #353535;
        }
      }
      > .way_wrapper {
        // margin-top: rpx(31);
		margin-top: rpx(11);
        > .title_ {
          > image {
            width: rpx(3);
            height: rpx(13);
            margin-right: rpx(5);
            vertical-align: middle;
          }
          > text {
            font-size: rpx(13);
            font-weight: bold;
            color: #353535;
          }
        }
        > .way_ {
          margin-top: rpx(16);
          > view {
            display: flex;
            justify-content: space-between;
            align-items: center;
			margin-bottom: rpx(20);
			>.moneybanktext_{
				display: flex;
				justify-content: right;
				flex-wrap: nowrap;
				>text{
					max-width: rpx(200);
					margin-right: rpx(10);
					text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
					white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
					overflow: hidden; /*超出部分隐藏*/
				}
				>.moneysele_{
					width: rpx(24);
					height: rpx(24);
					border: 1px solid #B2B2B2;
					border-radius: 50%;
					box-sizing: border-box;
					> image {
					width: rpx(24);
					height: rpx(24);
					vertical-align: middle;
					margin-right: rpx(8);  
					
				    }
				}
				>.moneyselebd_{
					border: none;
				}
			}
			>.moneysele_{
				width: rpx(24);
				height: rpx(24);
				border: 1px solid #B2B2B2;
				border-radius: 50%;
				box-sizing: border-box;
				> image {
				width: rpx(24);
				height: rpx(24);
				vertical-align: middle;
				margin-right: rpx(8);  
			    }
			}
			>.moneyselebd_{
				border: none;
			}
            > .money_ {
              display: flex;
              align-items: center;
              > image {
                width: rpx(24);
                height: rpx(24);
                vertical-align: middle;
                margin-right: rpx(8);
              }
			  
              > text {
                font-size: rpx(13);
                font-weight: 400;
                color: #353535;
              }
            }
            > image {
              width: rpx(22);
              height: rpx(22);
              vertical-align: middle;
            }
          }
        }
        > .but_wrapper {
          margin-top: rpx(24);
          width: rpx(327);
          height: rpx(40);
          background: #fa9d3b;
          border-radius: rpx(20);
          font-size: rpx(17);
          font-weight: 400;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  > .footer_wrapper {
    padding: rpx(16) rpx(12);
    margin: rpx(0) rpx(12);
    background: #ffffff;
    border-radius: rpx(5);
    > .title_ {
      > image {
        width: rpx(3);
        height: rpx(13);
        margin-right: rpx(5);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: bold;
        color: #353535;
      }
    }
    > .info_ {
      margin-top: rpx(10);
      p {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
    }
  }
}

.slot-content {
  > .content_wrapper {
    .logo_ {
      padding: rpx(16) rpx(0);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      > .img_1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: rpx(319);
        height: rpx(64);
      }
      > image.img_2 {
        width: rpx(72);
        height: rpx(72);
        vertical-align: middle;
        position: relative;
        z-index: 99;
      }
    }
    > .main_wrapper {
      padding: rpx(0) rpx(12) rpx(16);
      > .item_info {
        padding: rpx(12) rpx(12) rpx(16);
        background: #fafafa;
        border-radius: rpx(5);
        > .top_ {
          display: flex;
          flex-direction: column;
          border-bottom: rpx(1) solid #e9e9e9;
          padding-bottom: rpx(4);
          > .item_ {
            display: flex;
            justify-content: space-between;
            padding-bottom: rpx(12);
            > text {
              font-size: rpx(13);
              font-weight: 400;
              color: #888888;
            }
            > view {
              font-size: rpx(13);
              font-weight: 400;
              color: #353535;
            }
          }
        }
        > .money_total {
          padding-top: rpx(16);
          > view {
            justify-content: space-between;
            display: flex;
            view:first-child {
              font-size: rpx(13);
              font-weight: bold;
              color: #353535;
            }
            view:last-child {
              font-size: rpx(13);
              font-weight: bold;
              color: #fa5151;
            }
          }
        }
      }
    }
  }
}
</style>
